<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
  	<%@ include file="../head.jsp"%>
  	<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />
  </head>
  <body>
  	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header">
			<h2>에디터파우치 조회/수정</h2>
		</div>

		<form id="updateEditerPouch" class="form-horizontal" role="form" method="post" action="updateEditerPouch.do" enctype="multipart/form-data">
			<fieldset>
			
				<input type="hidden" name="id" value="${cmd.idPouch}"/>
				<input type="hidden" name="isEditerPick" value="${cmd.editerPick}"/>
			
				<div class="form-group">
					<label for="isDisplay" class="col-md-2 control-label">노출여부</label>
					<div class="col-md-10">
						<label class="radio-inline">
							<input type="radio" name="isDisplay" value="1" <c:if test="${cmd.isDisplay == 1}">checked</c:if>> Y
						</label>
						<label class="radio-inline">
							<input type="radio" name="isDisplay" value="0" <c:if test="${cmd.isDisplay == 0}">checked</c:if>> N
						</label>
					</div>
				</div>

				<div class="form-group">
					<label for="idPouch" class="col-md-2 control-label">파우치 번호</label>
					<div class="col-md-10">
						<p class="form-control-static">${cmd.idPouch}</p>
					</div>
				</div>
				
				<div class="form-group">
					<label for="created_date" class="col-md-2 control-label">생성일</label>
					<div class="col-md-10">
						<p class="form-control-static">
							${fn:substring(cmd.create_date, 0, 4)}-${fn:substring(cmd.create_date, 4, 6)}-${fn:substring(cmd.create_date, 6, 8)}
							&nbsp;${fn:substring(cmd.create_date, 8, 10)}:${fn:substring(cmd.create_date, 10, 12)}:${fn:substring(cmd.create_date, 12, 14)}
						</p>
					</div>
				</div>

				<div class="form-group">
					<label for="pouchTitle" class="col-md-2 control-label">파우치명</label>
					<div class="col-md-10">
						<input type="text" class="form-control" name="pouchTitle" value="${cmd.pouchTitle}"/>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchCategory" class="col-md-2 control-label">파우치 카테고리</label>
					<div class="col-md-10">
						<select name="pouchCategory" class="form-control">
							<option>- 선택하세요 -</option>
							<c:forEach items="${pouchCategory}" var="pouchCategory">
								<option value="${pouchCategory.idPouchCategory}" <c:if test="${pouchCategory.idPouchCategory == cmd.idPouchCategory}">
								selected</c:if>>${pouchCategory.pouchCategoryText}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchBrand" class="col-md-2 control-label">파우치 브랜드</label>
					<div class="col-md-10">
						<select name="pouchBrand" class="form-control">
							<option>- 선택하세요 -</option>
							<c:forEach items="${brand}" var="brand">
								<option value="${brand.idBrand}" <c:if test="${brand.idBrand == cmd.idBrand}">
								selected</c:if>>${brand.brandTitle}</option>
							</c:forEach>
						</select>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchText" class="col-md-2 control-label">파우치 내용</label>
					<div class="col-md-10">
						<textarea id="pouchText" name="pouchText" class="form-control" rows="10">${cmd.pouchText}</textarea>
					</div>
				</div>
				
				<div class="form-group">
					<label for="pouchImg" class="col-md-2 control-label">이미지 <span class="text-danger">(286x340)</span></label>
					<div class="col-md-10">
						<c:choose>
							<c:when test="${cmd.image != null}">
								<div class="row">
									<div class="col-md-4">
										<p class="form-control-static">
											<a href="download.jsp?${cmd.image}" data-lightbox="roadtrip" title="${cmd.pouchTitle}">
												<img src="download.jsp?${cmd.image}" class="img-thumbnail img-responsive"/>
											</a>
										</p>
									</div>
									<div class="col-md-8">
										<br/>
										<ul>
											<li>항번: ${cmd.image.idAttacheFile}</li>
											<li>원본 파일 이름: ${cmd.image.fileOrgName}</li>
											<li>파일 크기: ${cmd.image.fileSize}byte</li>
											<li>업로드된 파일 이름: ${cmd.image.fileSaveName}</li>
											<li>업로드된 폴더 경로: ${cmd.image.fileDir}</li>
											<li>파일 타입: ${cmd.image.fileType}</li>
										</ul>
										&nbsp;&nbsp;&nbsp;&nbsp;
										<button type="button" class="btn btn-sm" id="imgEdit">변경</button>
										<br/><br/>
										<div id="imgDiv"><input type="file" class="form-control" name="editImg"/></div>
									</div>
								</div>
							</c:when>
							<c:otherwise>
								<input type="file" class="form-control" name="editerPouchImg"/>
							</c:otherwise>
						</c:choose>
					</div>
				</div>
				
				<div class="form-group">
					<label for="etc" class="col-md-2 control-label">제품정보</label>
					<div class="col-md-10">
						<div class="table-responsive">
							<table class="table table-condensed">
								<thead>
									<tr class="warning row">
										<th class="text-center col-md-2">번호</th>
										<th class="text-center col-md-2">이미지</th>
										<th class="text-center col-md-4">브랜드명</th>
										<th class="text-center col-md-4">제품명</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${cmd.list}" var="list" begin="0" end="9" varStatus="idx">
										<tr class="text-center row">
											<td class="col-md-2">${idx.index + 1}</td>
											<td class="col-md-2"><c:if test="${list.image != null}"><img src="download.jsp?${list.image}"
												class="img-thumbnail"/></c:if></td>
											<td class="col-md-4 productLine">
												<select class="form-control" name="brand${idx.index}">
													<option value="default">- 브랜드를 선택하세요 -</option>
													<c:forEach items="${brand}" var="brand">
														<option value="${brand.idBrand}" <c:if test="${brand.idBrand == list.idBrand}">selected</c:if>>
															${brand.brandTitle}</option>
													</c:forEach>
												</select>
											</td>
											<td class="col-md-4 productLine">
												<select class="form-control product" name="product${idx.index}">
													<option value="default">- 브랜드를 먼저 선택하세요 -</option>
												</select>
											</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<label for="etc" class="col-md-2 control-label">기타정보</label>
					<div class="col-md-10">
						<div class="table-responsive">
							<table class="table table-condensed">
								<thead>
									<tr class="warning row">
										<th class="text-center col-md-6">추천</th>
										<th class="text-center col-md-6">댓글</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center row">
										<td class="col-md-6">
											<a href="listRegister.do?where= AND idRegister in (SELECT idRegister FROM wishuserpouchmapping WHERE idPouch=${cmd.idPouch})"
												target="_blank">${cmd.recommendCount}</a>
										</td>
										<td class="col-md-6">
											<a href="#" onclick="window.open('pouchComment.do?id=${cmd.idPouch}', '', 'width=1000, height=600, scrollbars=yes, toolbar=no, menubar=no, status=no, location=no'); return false;">${cmd.commentCount}</a>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<div class="form-group">
					<div class="col-md-offset-2 col-md-10">
						<div class="row">
							<div class="col-md-6">
								<button type="submit" class="btn btn-primary btn-block">수정하기</button>
							</div>
							<div class="col-md-6">
								<button type="reset" class="btn btn-warning btn-block">다시작성</button>
							</div>
						</div>
					</div>
				</div>

			</fieldset>
		</form>
	</div>
	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/lightbox-2.6.min.js"></script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script type="text/javascript">
		$(function() {
			
			arr = new Array();
			
			<c:forEach items="${cmd.list}" var="list" begin="0" end="9" varStatus="idx">
				if ($("select[name='brand${idx.index}'] > option:selected").index() > 0) {
					$("select[name='product${idx.index}']").empty();
					var brand = $("select[name='brand${idx.index}'] > option:selected").val();
					
					$.ajax({
						async: false,
						url: "ajax/brand.jsp",
						data: "brand=" + brand,
						dataType: "xml",
						timeout: 30000,
						cache: false,
						async: false,
						success: function(req) {
							$(req).find("item").each(function() {
								var idProduct = $(this).find("idProduct").text();
								var productTitle = $(this).find("productTitle").text();
								
								var option = $("<option>").html(productTitle);
								option.attr({'value' : idProduct});
								
								$("select[name='product${idx.index}']").append(option);
							});
						},
						error: function(xhr, status, error) {
							alert("status: " + status + " / error-code: " + xhr.status + " " + error);
						}
					});
					
					var temp = $("select[name='product${idx.index}'] > option").length;
					for (var i=0; i<temp; i++) {
						var val1 = $("select[name='product${idx.index}'] option:eq(" + i + ")").val();
						var val2 = '${list.idProduct}';
						if (val1 == val2) {
							$("select[name='product${idx.index}'] option:eq(" + i + ")").attr("selected", "selected");
							arr['${idx.index}'] = val2;
						}
					}
					
				}
			</c:forEach>
				
			<c:forEach var="i" begin="0" end="9">
				$("select[name='brand${i}']").change(function() {
					
					arr['${i}'] = null;
					
					$("select[name='product${i}']").empty();
					
					var brand = $(this).find("option:selected").val();
					
					$.ajax({
						async: false,
						url: "ajax/brand.jsp",
						data: "brand=" + brand,
						dataType: "xml",
						timeout: 30000,
						cache: false,
						async: false,
						success: function(req) {
							$(req).find("item").each(function() {
								var idProduct = $(this).find("idProduct").text();
								var productTitle = $(this).find("productTitle").text();
								
								var option = $("<option>").html(productTitle);
								option.attr({'value' : idProduct});
								
								$("select[name='product${i}']").append(option);
							});
						},
						error: function(xhr, status, error) {
							alert("status: " + status + " / error-code: " + xhr.status + " " + error);
						}
					});
				});
				
				$("select[name='product${i}']").change(function() {
					
					var product = $(this).find("option:selected").val();
					
					for (var i=0; i<arr.length; i++) {
						if (arr[i] == product && product != 1) {
							alert("동일한 제품을 선택할수 없습니다.");
							$("select[name='product${i}'] option:eq(0)").attr("selected", "selected");
							arr['${i}'] = null;
							return;
						}
					}
					
					if (product == 'default') {
						arr['${i}'] = null;
					} else {
						arr['${i}'] = product;
					}
					
				});
			</c:forEach>
		});
	</script>
	<script type="text/javascript">
		$(function() {
			$("#updateEditerPouch").submit(function() {
				
				if (!$("input[name='isDisplay']").is(":checked")) {
					alert("노출여부를 선택해 주세요");
					$("input[name='isDisplay']").focus();
					return false;
				}
				
				if (!$("input[name='pouchTitle']").val().isValue()) {
					alert("파우치명을 입력하세요.");
					$("input[name='pouchTitle']").focus();
					return false;
				}
				
				if ($("select[name='pouchCategory'] > option:selected").index() < 1) {
					alert("파우치 카테고리를 선택하세요.");
					$("select[name='pouchCategory']").focus();
					return false;
				}
				
				var image = true;
				$("input[name='editerPouchImg']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						image = false;
					}
				});
				
				var check = true;
				if ($("select[name='pouchBrand'] > option:selected").index() < 1) {
					check = false;
				}
				
				if (!image && !check) {
					alert("이미지나 파우치 브랜드를 선택하세요.");
					return false;
				}
				
				if (!$("textarea[name='pouchText']").val().isValue()) {
					alert("내용을 입력하세요.");
					$("textarea[name='pouchText']").focus();
					return false;
				}
				
				var productCount = 0;
				<c:forEach var="i" begin="0" end="9">
					if ($("select[name='product${i}'] > option:selected").index() > 0) {
						productCount++;
					}
				</c:forEach>
				if (productCount == 0) {
					alert("최소한 1개이상의 제품을 선택해 주세요.");
			        return false;
				}
				
				if (!confirm("정말 수정하시겠습니까?")) {
					return false;
				}
				
			});
		});
	</script>
	<script>
		$(function() {
			$("#imgDiv").hide();
			
			$("#imgEdit").click(function() {
				$("input[name='editImg']").replaceWith($("input[name='editImg']").clone(true));
				$("#imgDiv").toggle();
			});
		});
	</script>
  </body>
</html>